Thank you for purchasing my theme.
If you have any questions that are beyond the scope of this help file,
please feel free to email via my user page contact form here.
Click here to view an latest version of this Documentation online!
CarRental is built with the Bootstrap 3 framework - that means you have access to all the great features, css & js goodies has to offer. Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
To learn more about Bootstrap's grid system, please refer to http://getbootstrap.com/css/#grid
'm using one main CSS file (css/styles.css), in this template which you are free to modify depending on the customization you require. There are also other additional style sheets that I do not recommend changing. Those style sheets reside in the 'css' folder.
The Styles CSS file contains all of the specific stylings for the page. The file is separated into sections using:
...
/* Defaults
--------------------------------------------*/
/* Animation Delay
--------------------------------------------*/
/* Autocomplete
--------------------------------------------*/
/* Carousel Fade
--------------------------------------------*/
/* Label
--------------------------------------------*/
/* Tooltip
--------------------------------------------*/
/* Links
--------------------------------------------*/
/* Scroll to Top Button
--------------------------------------------*/
/* Header
--------------------------------------------*/
/* .... etc .... */
/* Start Media Queries
--------------------------------------------*/If you would like to edit a specific section of the site, simply find the appropriate label in the css file, and then scroll down until you find the appropriate style that needs to be edited.
This theme comes with two other color variations. To change the color style from the theme edit the following lines:
<!-- Main Styles -->
<link href="css/styles.css" rel="stylesheet">
<!-- Available main styles: styles-red.css, styles-green.css -->Just change the Stylesheet file name for example form href="css/styles.css" to href="css/styles-red.css".
Available main styles: styles-red.css, styles-green.css
To change the logo edit the following lines:
...
<!-- Logo start -->
<div class="brand">
<h1><a class="scroll-to" href="#top"><img class="img-responsive" src="<!-- logo-image-path -->" alt="Car|Rental"></a></h1>
</div>
<!-- Logo end -->The value is the image path from the car preview in the checkout form. The option is the name from the car preview.
To add or change a language edit the following lines:
...
<!-- Language Switch start -->
<div class="language-switch pull-right">
<div class="dropdown">
<a data-toggle="dropdown" href="#">Select your language </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#"><img src="img/flags/United-States.png" alt="usa"> English</a></li>
<li><a href="#"><img src="img/flags/Germany.png" alt="germany"> German</a></li>
<li><a href="#"><img src="<!-- image-path -->" alt="<!-- country -->"> <!-- country --></a></li>
...
</ul>
</div>
</div>
<!-- Language Switch end -->You will find all available flag images in the flags folder. img/flags/...
To add or change a navigation item edit the following lines:
<!-- Nav-Links start -->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#top" class="scroll-to">Home</a></li>
<li><a href="#services" class="scroll-to">Services</a></li>
<li><a href="#vehicles" class="scroll-to">Vehicle Models</a></li>
<li><a href="#reviews" class="scroll-to">Reviews</a></li>
<li><a href="#locations" class="scroll-to">Locations</a></li>
<li><a href="#contact" class="scroll-to">Contact</a></li>
<li><a href="#<!-- your-id -->" class="scroll-to"><!-- your-label --></a></li>
...
</ul>
<!-- Nav-Links end -->The link "href" is the ID from the element for the "scroll to" action.
To add or change a car in the select field edit the following lines:
...
<!-- Car select start -->
<div class="styled-select-car">
<select name="car-select" id="car-select">
<option value="">Select your car type</option>
<option value="img/vehicle1.jpg">VW Golf VII</option>
<option value="<!-- your-car-image-path -->"><!-- enter car name --></option>
...
</select>
</div>
<!-- Car select end -->The value is the image path from the car preview in the checkout form. The option is the name from the car preview.
To add or change an autocomplete location open js/locations-autocomplete.js, find and edit code below:
var locations = [
{ value: "Santa Monica - 2102 Lincoln Blvd"},
{ value: "With Co-Ordinates - 5711 W Century Blvd", latLng: [33.946272, -118.381641]},
{ value: "Las Vegas - 6401 Centennial Center Blvd"},
...
];If your country only supported by coordinates you can add them additionally. { value: "With Co-Ordinates - 5711 W Century Blvd", latLng: [33.946272, -118.381641]},
To add or change a service box edit the following lines:
...
<!-- Service Box start -->
<div class="col-md-6">
<div class="service-box wow fadeInLeft" data-wow-offset="100">
<div class="service-icon">+</div>
<h3 class="service-title"><!-- enter-your-title --></h3>
<div class="clearfix"></div>
<p class="service-content"><!-- enter-your-content --></p>
</div>
</div>
<!-- Service Box end -->To add or change the newsletter content edit the following lines:
<!-- Newsletter start -->
<section id="newsletter" class="wow slideInLeft" data-wow-offset="300">
<div class="container">
<div class="row">
<div class="col-md-12"><div class="alert hidden" id="newsletter-form-msg"></div></div>
<div class="col-md-5 col-xs-12">
<h2 class="title"><!-- enter your title --></h2>
</div>
<div class="col-md-7">
<div class="newsletter-form pull-left">
<form action="#" method="post" name="newsletter-form" id="newsletter-form">
<input type="hidden" name="action" value="send_newsletter_form"/>
<div class="input-group">
<input type="email" name="newsletter-email" class="form-control" placeholder="Enter your Email Address">
<span class="input-group-btn">
<input class="btn btn-default button" type="submit" value="send">
</span>
</div>
</form>
</div>
<div class="social-icons pull-right">
<ul>
<li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
<li><a class="googleplus" href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</section>
<!-- Newsletter end -->Please check Email Configuration to get your Newsletter work.
Please check Email Configuration for Mailchimp Support.
To add or change a vehicle first edit the tab navigation:
<!-- Vehicle nav start -->
<div class="col-md-3 wow fadeInUp" data-wow-offset="200">
<div id="vehicle-nav-container">
<ul class="vehicle-nav">
<li class="active"><a href="#vehicle-1">VW Golf VII</a><span class="active"> </span></li>
<li><a href="#vehicle-2">Audi A1 S-LINE</a><span class="active"> </span></li>
<li><a href="#vehicle-3">Toyota Camry</a><span class="active"> </span></li>
<li><a href="#vehicle-4">BMW 320 ModernLine</a><span class="active"> </span></li>
<li><a href="#vehicle-5">Mercedes-Benz GLK</a><span class="active"> </span></li>
<li><a href="#vehicle-6">VW Passat CC</a><span class="active"> </span></li>
<li><a href="#<!-- your-tab-id -->"><!-- your-nav-label --></a><span class="active"> </span></li>
...
</ul>
</div>
</div>
<!-- Vehicle nav end -->After editing the navigation edit the tab:
<!-- Vehicle data start -->
<div class="vehicle-data" id="<!-- your-tab-id -->">
<div class="col-md-6" data-wow-offset="200">
<div class="vehicle-img">
<img class="img-responsive" src="<!-- your-vehicle-img-path -->" alt="Vehicle">
</div>
</div>
<div class="col-md-3 wow fadeInUp" data-wow-offset="200">
<div class="vehicle-price">$ <!-- your-price --> <span class="info">rent per day</span></div>
<table class="table vehicle-features">
<tbody><tr>
<td>Model</td>
<td>Limousine</td>
</tr>
<tr>
<td><!-- your feature --></td>
<td><!-- your value --></td>
</tr>
<!-- ... -->
</tbody></table>
<a href="#teaser" class="reserve-button scroll-to"><span class="glyphicon glyphicon-calendar"></span> Reserve now</a>
</div>
</div>
<!-- Vehicle data end -->To add or change a review edit the following lines:
<!-- Review item start -->
<div class="item active">
<div class="review">
<!-- enter-your-review-content -->
</div>
<div class="author">
<!-- enter-your-review-author -->
</div>
</div>
<!-- Review item end -->To add or change an autocomplete location open js/locations-autocomplete.js, find and edit code below:
var locations = [
{ value: "Santa Monica - 2102 Lincoln Blvd"},
{ value: "With Co-Ordinates - 5711 W Century Blvd", latLng: [33.946272, -118.381641]},
{ value: "Las Vegas - 6401 Centennial Center Blvd"},
...
];If your country only supported by coordinates you can add them additionally. { value: "With Co-Ordinates - 5711 W Century Blvd", latLng: [33.946272, -118.381641]},
To add or change single photo content edit the following lines:
<!-- Single photo start -->
<div class="row wow fadeInLeft" data-wow-offset="100">
<div class="col-md-6 col-xs-12 pull-right">
<img src="img/info-img.jpg" alt="Info Img" class="img-responsive">
</div>
<div class="col-md-6 pull-left">
<h2 class="title"><!-- enter-your-title --></h2>
<h3 class="subtitle"><!-- enter-your-subtitle --></h3>
<p><!-- enter-your-content --></p>
<span cls="btn-border btn-yellow"><a href="<!-- your-button-link -->" class="btn"><!-- your-button-text --></a></span>
<span cls="btn-border btn-gray"><a href="<!-- your-button-link -->" class="btn"><!-- your-button-text --></a></span>
</div>
</div>
<!-- Single photo end -->To add or change video content edit the following lines:
<!-- Video start --><div class="row wow fadeInRight" data-wow-offset="50"> <div class="col-md-6"> <div class="video"> <!-- Youtube iframe start --> <iframe width="420" height="315" src="<!-- enter-your-youtube-link -->" frameborder="0" allowfullscreen=""></iframe> <!-- Youtube iframe end --> </div> </div> <div class="col-md-6"> <h2 class="title"><!-- enter-your-title --></h2> <h3 class="subtitle"><!-- enter-your-subtitle --></h3> <p><!-- enter-your-content --></p> </div></div><!-- Video end -->To add or change partners content edit the following lines:
<!-- Partners start -->
<section id="partners" class="wow fadeIn" data-wow-offset="50">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2><!-- enter-your-title --></h2>
<span class="underline"> </span>
<p><!-- enter-your-content --></p>
</div>
<div class="col-md-3 col-xs-6 text-center">
<img src="<!-- your-partner-image -->" alt="Partner" class="img-responsive wow fadeInUp" data-wow-delay="0.5s" data-wow-offset="200">
</div>
<div class="col-md-3 col-xs-6 text-center">
<img src="<!-- your-partner-image -->" alt="Partner" class="img-responsive wow fadeInUp" data-wow-delay="1s" data-wow-offset="200">
</div>
<div class="col-md-3 col-xs-6 text-center">
<img src="<!-- your-partner-image -->" alt="Partner" class="img-responsive wow fadeInUp" data-wow-delay="1.5s" data-wow-offset="200">
</div>
<div class="col-md-3 col-xs-6 text-center">
<img src="<!-- your-partner-image -->" alt="Partner" class="img-responsive wow fadeInUp" data-wow-delay="2s" data-wow-offset="200">
</div>
</div>
</div>
</section>
<!-- Partners end -->Please check Email Configuration to get your contact and checkout form work.
The newsletter, contact and appointment forms is based on jQuery. You don't have to know PHP. To change sample email address, open php/mail-config.php, find and edit code below:
...
return array(
// Mail Address and Name
'sender_email' => 'your@email-address.com',
'sender_name' => 'Your Company Name',
// Mail Config
'mail_type' => 'mail', // smtp or mail - mail is the php mail function
// If you use the php mail type you don't have to enter your SMTP data!
'smtp_server' => 'your.smtp-server.com',
'smtp_port' => '25',
'smtp_user' => 'username',
'smtp_password' => 'password',
// Mail Subjects
'contact_form_subject' => 'New message form website',
'newsletter_form_subject' => 'New message form website',
'appointment_form_subject' => 'New appointment request form website',
'appointment_autoresponder_subject' => 'Thanks for your appointment request',
// Mailchimp
'mailchimp_support' => false, // true is activated
'mailchimp_api_key' => 'xxxxxxxxxxxxxxxxxxxxxxxx',
'mailchimp_list_id' => 'xxxxxx',
);The landing page provide 2 methods to send emails. 1. Via SMTP Server and 2. via PHP MAIL function. You can change the mail type. Use smtp or mail as option. By default the landing page use the php mail function.
To activate MailChimp Support set the option to true!
When configuring your MailChimp support, you will be asked for a MailChimp API key and list ID. Both of these are located in your MailChimp account, and are accessible after logging in at www.MailChimp.com. Here's how you find them...
API Key:
From the top, right menu, select Account, Extras, API Keys & Authorized Apps. Your API Key will be listed in the table labeled "Your API Keys". Best to copy and paste into the php/config.php.
List ID:
When viewing your MailChimp Lists, select the list you wish to offer user sign-up, then click the word "Settings". Your list id will be in the bottom field of the resulting page. Best to copy and paste into the php/mail-config.php.
This theme imports the following Javascript files.
The following Photoshop file are included with the download package place in /PSD/ folder:
CarRental Landingpage.psd